import '../../style/signSetting.less';
import React, {Component} from 'react'
import {inject, observer} from 'mobx-react';
import { toJS } from 'mobx';
import { withRouter, Route } from 'react-router-dom';
import { Tools, List } from 'weaver-mobile';
import { Form } from 'weaver-mobile-page';

@inject('signStore')
@withRouter
@observer
export default class SignSetting extends Component {
  componentDidMount(){
    this.init();
  }

  init = () => {
    const {signStore: store} = this.props;
    store.getAutoEMSet();
  }

  getFields = () => {
    const {signStore: store} = this.props;
    const { formStore, onFieldChangeHandle } = store;
    const { conditioninfo, isInit } = formStore;
    const fields = [];
    if (isInit) {
      conditioninfo.forEach((group) => {
        group.items.forEach((field) => {
          let com = (
            <Form.Item
              key={field.domkey.join('__')}
              form={formStore}
              fieldConfig={field}
              onChange={onFieldChangeHandle}
            />
          )
          if(field.conditionType == "DESCRIPTION"){
            fields.push((
              <div key={field.domkey.join('__')} className='option_description'><div>{field.value}</div></div>
            ))
          }else{
            fields.push(com);
          }
        });
      });
    }
    return fields;
  }

  render() {
    return (
      <div className='hrm-sign-setting' style={{ height: '100%', background: '#f3f8fe' }} >
        <Form>
          <List>
            {this.getFields()}
          </List>
        </Form>
      </div>
    )
  }
}